<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<div>
  <label for="year">年：</label>
  <input type="radio" id="year" name="date-type" value="year">
</div>
<div>
  <label for="month">月：</label>
  <input type="radio" id="month" name="date-type" value="month">
</div>
<div>
  <label for="day">日：</label>
  <input type="radio" id="day" name="date-type" value="day">
</div>

<div>
  <button id="prev-year">上一年</button>
  <button id="next-year">下一年</button>
  <button id="prev-month">上一月</button>
  <button id="next-month">下一月</button>
  <button id="prev-day">上一日</button>
  <button id="next-day">下一日</button>
</div>

<div>
  <span id="selected-date"></span>
</div>
<script>
  // 获取页面元素
  const yearRadio = document.getElementById('year');
  const monthRadio = document.getElementById('month');
  const dayRadio = document.getElementById('day');
  const prevYearBtn = document.getElementById('prev-year');
  const nextYearBtn = document.getElementById('next-year');
  const prevMonthBtn = document.getElementById('prev-month');
  const nextMonthBtn = document.getElementById('next-month');
  const prevDayBtn = document.getElementById('prev-day');
  const nextDayBtn = document.getElementById('next-day');
  const selectedDateSpan = document.getElementById('selected-date');

  // 初始化日期为当前日期
  let date = new Date();

  // 根据是否选中年/月/日，格式化不同的日期字符串
  function formatDate(date, type) {
    if (type === 'year') {
      return date.getFullYear().toString();
    } else if (type === 'month') {
      const year = date.getFullYear().toString();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      return `${year}-${month}`;
    } else if (type === 'day') {
      const year = date.getFullYear().toString();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = '12'.padStart(2, '0');
      const minutes = '00'.padStart(2, '0');
      const seconds = '00'.padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }

  // 更新选中的日期显示
  function updateSelectedDate() {
    let selectedDate;
    if (yearRadio.checked) {
      selectedDate = formatDate(date, 'year');
    } else if (monthRadio.checked) {
      selectedDate = formatDate(date, 'month');
    } else if (dayRadio.checked) {
      selectedDate = formatDate(date, 'day');
    }
    selectedDateSpan.innerText = selectedDate;
  }

  // 点击按钮更新日期
  prevYearBtn.addEventListener('click', () => {
    date.setFullYear(date.getFullYear() - 1);
    updateSelectedDate();
  });

  nextYearBtn.addEventListener('click', () => {
    date.setFullYear(date.getFullYear() + 1);
    updateSelectedDate();
  });

  prevMonthBtn.addEventListener('click', () => {
    date.setMonth(date.getMonth() - 1);
    updateSelectedDate();
  });

  nextMonthBtn.addEventListener('click', () => {
    date.setMonth(date.getMonth() + 1);
    updateSelectedDate();
  });
  prevDayBtn.addEventListener('click', () => {
    date.setDate(date.getDate() - 1);
    updateSelectedDate();
  });

  nextDayBtn.addEventListener('click', () => {
    date.setDate(date.getDate() + 1);
    updateSelectedDate();
  });

  // 默认选中日按钮，更新选中日期显示
  dayRadio.checked = true;
  updateSelectedDate();

</script>

</html>